<template>
  <d2-container>
    <!--学生列表卡片-->
    <el-card class="box-card">
      <el-form :inline="true" :model="studentsVO" class="demo-form-inline">
        <el-form-item label="所在年级" label-width="70px">
          <el-select v-model="studentsVO.stuGrade" clearable placeholder="请选择">
            <el-option
              v-for="item in grades"
              :key="item.id"
              :label="item.gradeName"
              :value="item.id">
              <span style="float: left">{{ item.gradeName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">
                            <span class="el-tag el-tag--success el-tag--mini el-tag--plain">{{ item.gradeCOUNT }}</span>
                        </span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属分院" label-width="70px">
          <el-select v-model="studentsVO.stuInstitute" clearable placeholder="请选择">
            <el-option
              v-for="item in institutes"
              :key="item.id"
              :label="item.instituteName"
              :value="item.id">
              <span style="float: left">{{ item.instituteName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">
                            <span class="el-tag el-tag--success el-tag--mini el-tag--plain">{{ item.instCOUNT }}</span>
                        </span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所在专业" label-width="70px">
          <el-select v-model="studentsVO.stuSpecialty" clearable placeholder="请选择"
                     @change="selectTrigger(studentsVO.specialty)">
            <el-option
              v-for="item in specialties"
              :key="item.id"
              :label="item.specialtyName"
              :value="item.id">
              <span style="float: left">{{ item.specialtyName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">
                            <span class="el-tag el-tag--success el-tag--mini el-tag--plain">{{ item.specCOUNT }}</span>
                        </span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所在班级" label-width="70px">
          <el-select v-model="studentsVO.stuClazz" clearable placeholder="请选择">
            <el-option
              v-for="item in clazzes"
              :key="item.id"
              :label="item.clazzName"
              :value="item.id">
              <span style="float: left">{{ item.clazzName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px"></span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学号" label-width="70px">
          <el-input v-model="studentsVO.stuId" placeholder="请输入学号" clearable></el-input>
        </el-form-item>
        <el-form-item label="姓名" label-width="70px">
          <el-input v-model="studentsVO.stuName" placeholder="请输入姓名" clearable style="width:190px"></el-input>
        </el-form-item>
        <el-form-item label="性别" label-width="40px">
          <el-radio v-model="studentsVO.stuGender" label="0">男</el-radio>
          <el-radio v-model="studentsVO.stuGender" label="1">女</el-radio>
          <el-radio v-model="studentsVO.stuGender" label="">全部</el-radio>
        </el-form-item>
        <el-form-item style="margin_left: 10px">
          <el-button icon="el-icon-refresh" @click="resetStudentsVO">重置</el-button>
          <el-button type="primary" icon="el-icon-search" @click="getStudentList">查询</el-button>
          <el-button type="success" icon="el-icon-plus" @click="show">添加</el-button>
          <el-button type="warning" icon="el-icon-download">导出</el-button>
        </el-form-item>
      </el-form>
      <!--表格内容显示区域-->
      <el-table
        :data="studentList"
        border
        stripe
        max-height="400"
        style="width: 100%;">
        <!-- <el-table-column
          sortable=""
          prop="id"
          label="#"
          width="60">
        </el-table-column> -->
        <el-table-column
          prop="stuId"
          label="学生学号"
          width="120">
        </el-table-column>
        <el-table-column
          prop="stuName"
          label="姓名"
          width="100">
        </el-table-column>
        <el-table-column
          prop="stuGender"
          label="性别"
          width="50">
          <template slot-scope="scope">
            <span class="el-tag el-tag--success el-tag--mini el-tag--light">{{scope.row.stuGender==0?'男':(scope.row.stuGender==1?'女':'保密')}}</span>
          </template>
        </el-table-column>
        <el-table-column
          sortable
          prop="gradeName"
          label="年级"
          width="80">
        </el-table-column>
        <el-table-column
          sortable
          prop="instituteName"
          label="所属分院"
          width="130">
        </el-table-column>
        <el-table-column
          sortable
          prop="specialtyName"
          label="所在专业"
          >
        </el-table-column>
        <el-table-column
          prop="clazz"
          label="所在班级"
          width="90">
        </el-table-column>
        <el-table-column
          prop="stuPhone"
          label="学生电话"
          width="120">
        </el-table-column>
        <el-table-column
          prop="stuQq"
          label="学生QQ"
          width="120">
        </el-table-column>
        <el-table-column
          label="操作"
          width="180">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-edit"></el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="del(scope.row.id)"></el-button>
            <el-button type="warning" size="mini" icon="el-icon-s-tools"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        style="padding-top: 15px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[6, 10, 20, 30]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
      <!-- 添加学生弹窗 -->
      <StudentsAdd :addOrUpdateVisible="addOrUpdateVisible" :grades="grades" :institutes="institutes" :specialties="specialties" :clazzes="clazzes" @changeShow="showAddOrUpdate" ref="addOrUpdateRef"></StudentsAdd>
    </el-card>
  </d2-container>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import { editStudent, findStudentList, deleteStudent } from '../../../api/students'
import { findInstitute } from '../../../api/institute'
import { findSpecialty } from '../../../api/specialty'
import { findClazz } from '../../../api/clazz'
import { findGrade } from '../../../api/grade'
import StudentsAdd from '../StudentsAdd/StudentsAdd'
export default {
  name: 'index',
  data () {
    return {
      studentsVO: {
        stuGrade: '',
        stuInstitute: '',
        stuSpecialty: '',
        stuId: '',
        stuName: '',
        stuGender: '',
        stuClazz: ''
      },
      // 控制新增弹窗的显示与隐藏
      addOrUpdateVisible: false,
      // 学生集合
      studentList: [],
      // 每页显示的页数
      size: 6,
      // 总条数
      total: 100,
      // 当前页码
      current: 1,
      institutes: [],
      specialties: [],
      grades: [],
      clazzes: []
    }
  },
  components: {
    StudentsAdd
  },
  created () {
    // 创建组件的时候调用查询所有用户的方法
    this.getStudentList()
    this.getInstitute()
    this.getSpecialty()
    this.getClazz()
    this.getGrade()
  },
  methods: {
    onSubmit () {
      console.log('submit!')
    },
    // 当每页条数改变的时候
    handleSizeChange (val) {
      // 将value赋值给size
      this.size = val
      // 重新去后台查询数据
      this.getStudentList()
    },
    // 当前页码改变的时候
    handleCurrentChange (val) {
      this.current = val
      this.getStudentList()
    },
    async getStudentList () {
      const { data } = await findStudentList(this.current, this.size, this.studentsVO)
      console.log(data)
      this.studentList = data.data.records
      this.total = data.data.total
    },
    async getInstitute () {
      const { data } = await findInstitute()
      console.log(data)
      this.institutes = data.data.institutes
    },
    async getSpecialty () {
      const { data } = await findSpecialty()
      console.log(data)
      this.specialties = data.data.specialties
    },
    selectTrigger (val) {
      this.$options.methods.getSpecialty()
    },
    async getClazz () {
      const { data } = await findClazz()
      console.log(data)
      this.clazzes = data.data.clazzes
    },
    async getGrade () {
      const { data } = await findGrade()
      console.log(data)
      this.grades = data.data.grades
    },
    // 重置表单
    resetStudentsVO () {
      this.studentsVO.stuId = ''
      this.studentsVO.stuName = ''
      this.studentsVO.stuGender = ''
      this.studentsVO.stuGrade = ''
      this.studentsVO.stuInstitute = ''
      this.studentsVO.stuSpecialty = ''
      this.studentsVO.stuClazz = ''
      this.getStudentList()
    },
    // 按钮点击事件 显示新增编辑弹窗组件
    show () {
      this.addOrUpdateVisible = true
    },
    // 监听 子组件弹窗关闭后触发，有子组件调用
    showAddOrUpdate (data) {
      if (data === 'false') {
        this.addOrUpdateVisible = false
      } else {
        this.addOrUpdateVisible = true
      }
    },
    // 删除学生
    async del (id) {
      var res = await this.$confirm(
        '此操作将永久删除该学生信息,是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
      // eslint-disable-next-line eqeqeq
      if (res === 'confirm') {
        const { data: res } = await deleteStudent(id)
        console.log(res)
        // eslint-disable-next-line eqeqeq
        if (res.code === 20000) {
          this.$notify.success({
            title: '操作成功',
            message: '学生删除成功'
          })
          this.getStudentList()
          this.getInstitute()
          this.getSpecialty()
          this.getClazz()
          this.getGrade()
        } else {
          this.$message.console.error(res.msg)
        }
      }
    }

  }
}
</script>

<style scoped>

</style>
